<template>
    <el-card shadow="always">
        <el-row class="margin-bottom-20">
            <el-col :span="8">
                <el-input placeholder="请输入商品关键字(默认查询全部)" v-model="params.query">
                    <template slot="append">
                        <el-button icon="el-icon-search" @click="searchBykeyWord"></el-button>
                    </template>
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button class="margin-left-10" type="primary" @click="goToNewGoodPage">添加新商品</el-button>
            </el-col>
        </el-row>
        <el-table border :max-height="h-230" :data="goods" v-loading="isLoading">
            <el-table-column label="序号" width="80" type="index" prop="index"></el-table-column>
            <el-table-column label="商品名称" prop="goods_name"></el-table-column>
            <el-table-column label="商品价格(元)" width="200" prop="goods_price"></el-table-column>
            <el-table-column label="商品重量" width="200" prop="goods_weight"></el-table-column>
            <el-table-column label="创建时间" width="200" prop="add_time" :formatter="timeFormatter"></el-table-column>
            <el-table-column label="操作" width="200">
				<template v-slot:default="{ row }">
                    <el-tooltip effect="dark" content="商品详情" placement="top-start">
						<el-button type="info" icon="el-icon-warning-outline" size="mini" @click="showGoodsInfo(row.goods_id)"></el-button>
					</el-tooltip>
					<el-tooltip effect="dark" content="商品更新" placement="top-start">
						<!-- <el-button type="primary" icon="el-icon-edit" size="mini" @click="$router.push('/goods/set?pid='+row.goods_id)"></el-button> -->
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="$router.push('/goods/set/'+row.goods_id)"></el-button>
                    </el-tooltip>
					<el-tooltip effect="dark" content="商品删除" placement="top-start">
						<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
					</el-tooltip>
				</template>
            </el-table-column>
        </el-table>
		<el-pagination class="margin-top-20" layout="total, sizes, prev, pager, next, jumper"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="params.pagesize"
			:current-page="params.pagenum"
			:total="total"
            @size-change="sizeChangeCallback"
			@current-change="currentChangeCallback"
		></el-pagination>
        <!-- 商品详情预览 -->
        <el-dialog
			title="商品详情预留"
			:visible.sync="isShowInfo"
			width="80%"
		>
            <p>该区域用于展示商品的线上预览状态</p>
            <div v-html="good.goods_introduce"></div>
			<template v-slot:footer>
				<span class="dialog-footer">
					<el-button @click="isShowInfo = false">关闭</el-button>
				</span>
			</template>
		</el-dialog>
    </el-card>
</template>

<script>
import { loadGoodsList,loadGoodInfo } from "../../api/goods.js";
export default {
    props:["h"],
    data() {
        return {
            isShowInfo:false,
            good:{},
            params:{
                query:"",
                pagenum:1,
                pagesize:5
            },
            goods:[],
            total:0,
            isLoading:false,
            timeFormatter:function(row,column,value) {
                // console.log(arg);
                return new Date( value*1000 ).toLocaleString();
                // return "asdasdasdasd"
            }
        }
    },
    methods:{
        goToNewGoodPage(){
            this.$router.push("/goods/add")
        },
        sizeChangeCallback(newSize){
			this.params.pagenum = 1;
			this.params.pagesize = newSize;
			this.findGoodList();
		},
		currentChangeCallback(currentPage){
			this.params.pagenum = currentPage;
			this.findGoodList();
		},
        searchBykeyWord(){
			this.params.pagenum = 1;
			this.findGoodList();
		},
        async showGoodsInfo(id){
            let good = await loadGoodInfo(id);
            if(!good) return;
            this.good = good;
            this.isShowInfo = true;
        },
        async findGoodList(){
            this.isLoading = true;
            let result = await loadGoodsList(this.params);
            if(!result) return;
            this.total = result.total;
            this.goods = result.goods;
            this.isLoading = false;
        }
    },
    created(){
        this.findGoodList();
    }

}
</script>